<template>
  <div class="app-container">
    <div class="box">
      {{ queryNames.companyName }}
      <el-button size="mini" type="primary" @click="handleAdd">查看信息</el-button>
    </div>
    <el-row :gutter="25">
      <el-col :span="8">
        <el-card class="syl-order">
          <div slot="header" class="clearfix">
            <span>总订单金额</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="contrast">
              <div class="syl-contrast-on">
                <img src="@/assets/image/envelope.png" alt="">
              </div>
              <div class="syl-contrast-under" v-html="'¥'+ tran(queryName.packageTotalPrice)" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="syl-meal">
          <div slot="header" class="clearfix">
            <span>套餐数量</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="contrast">
              <div class="syl-contrast-on">
                <img src="@/assets/image/smiley.png" alt="">
              </div>
              <div class="syl-contrast-under" v-html="tran(queryName.packageTotalNum)" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="syl-darter">
          <div slot="header" class="clearfix">
            <span>订单数量</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="contrast">
              <div class="syl-contrast-on">
                <img src="@/assets/image/amount.png" alt="">
              </div>
              <div class="syl-contrast-under" v-html="tran(queryName.orderNum)" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="syl-undo">
      <div class="month">
        <el-row>
          <el-col :span="8">
            <div style="color: #333333;font-weight: 600;font-size: 22px" v-html="head" />
          </el-col>
          <el-col :span="16">
            <div style="text-align: right">
              <el-button :class="[type===1?'active':'ordinary']" size="mini" @click="getDate(1)">本周</el-button>
              <el-button :class="[type===2?'active':'ordinary']" size="mini" @click="getDate(2)">本月</el-button>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                size="mini"
                range-separator="至"
                value-format="timestamp"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              <el-button type="primary" size="mini" icon="el-icon-search" @click="getSearch()">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="export">
        <h3>导出订单汇总</h3>
      </div>
      <div class="export">
        <span>选择导出时间:</span>
        <el-date-picker
          v-model="dateRange1"
          :clearable="false"
          type="daterange"
          size="mini"
          range-separator="至"
          value-format="timestamp"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-button v-preventReClick type="primary" size="mini" icon="el-icon-download" @click="handleExport2">导出
        </el-button>
      </div>
      <div id="nprdjmakl" class="ordering" />
    </div>
    <!-- 添加或修改门店对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="companyName">
              <el-input
                v-model.trim="form.companyName"
                placeholder="请输入企业名称"
                :maxlength="100"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="企业邀请码" prop="inviteCode">
              <el-input
                v-model.trim="form.inviteCode"
                placeholder="请输入企业名称"
                :maxlength="100"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="所在区域" prop="areaCode">
              <el-cascader
                v-model="selectedOptions"
                style="width: 100%"
                :options="option"
                :disabled="edit"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactName">
              <el-input
                v-model.trim="form.contactName"
                :disabled="transfer"
                placeholder="请输入联系人"
                :maxlength="100"
              />
            </el-form-item>
            <el-form-item label="联系方式" prop="contactPhone">
              <el-input
                v-model.trim="form.contactPhone"
                :disabled="transfer"
                placeholder="请输入联系方式"
                :maxlength="11"
                @change="getContactPhone"
              />
            </el-form-item>
            <el-form-item label="用餐人数" prop="mealPeopleNum">
              <el-input
                v-model.trim="form.mealPeopleNum"
                placeholder="请输入用餐人数"
                :disabled="edit"
                :maxlength="8"
              />
            </el-form-item>
            <el-form-item label="注册地址" prop="address">
              <el-input v-model.trim="form.address" placeholder="请输入注册地址" :disabled="edit" :maxlength="100" />
            </el-form-item>
            <el-form-item label="配送地址" prop="sendAddress">
              <el-input
                v-model.trim="form.sendAddress"
                placeholder="请输入配送地址"
                :disabled="edit"
                :maxlength="100"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="statsUpdate" type="primary" @click="getTransfer">过 户</el-button>
        <el-button v-if="statsUpdate" type="primary" @click="getEdit">编 辑</el-button>
        <el-divider v-if="statsUpdate" direction="vertical" />
        <el-button v-if="statsUpdate" @click="cancel">关 闭</el-button>
        <el-button v-if="statsValue" @click="cancelReturn">取 消</el-button>
        <el-divider v-if="statsValue" direction="vertical" />
        <el-button v-if="statsValue" v-preventReClick type="primary" :loading="loading" @click="submitForm">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addCompany,
  getCode,
  getDateById,
  manageCompanyOrderTotalInfo,
  manageCompanyOrderTotalTrend
} from '@/api/system/enterprise'
import { regionData } from 'element-china-area-data'
import serverMap from '../../../../../config/serverMap'

export default {
  name: 'Index',
  data() {
    return {
      // 状态
      statsUpdate: true,
      statsValue: false,
      // 过户
      transfer: true,
      // 编辑
      edit: true,
      // 标题
      title: '近一周订餐数量',
      head: '近一周订餐数量',
      type: 1,
      dateRange: [],
      dateRange1: [],
      // 区域数据
      selectedOptions: [],
      option: regionData,
      open: false,
      loading: false,
      // 表单
      form: {
        companyName: undefined,
        contactName: undefined,
        contactPhone: undefined,
        mealPeopleNum: undefined,
        address: undefined,
        sendAddress: undefined
      },
      // 表单验证
      rules: {
        sendAddress: [
          { required: true, message: '配送地址不能为空', trigger: 'blur' },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_-]+$/,
            message: '禁止输入非法字符',
            trigger: 'blur'
          }
        ],
        address: [
          { required: true, message: '注册地址不能为空', trigger: 'blur' },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]+$/,
            message: '禁止输入非法字符',
            trigger: 'blur'
          }
        ],
        mealPeopleNum: [
          { required: true, message: '用餐人数不能为空', trigger: 'blur' },
          {
            pattern: /^[1-9]{1}[0-9]*$/,
            message: '用餐人数为正整数并且用餐人数不能以0开头',
            trigger: 'blur'
          }
        ],
        contactPhone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
            message: '手机号码有误，请重填',
            trigger: 'blur'
          }
        ],
        contactName: [
          { required: true, message: '联系人不能为空', trigger: 'blur' },
          {
            pattern: /[\u4e00-\u9fa5]/,
            message: '联系人只能为中文',
            trigger: 'blur'
          }
        ]
      },
      // 企业ID
      id: null,
      // 企业信息参数
      queryNames: {
        companyName: undefined,
        inviteCode: undefined,
        contactPhone: undefined
      },
      // 订单金额参数
      queryName: {
        orderNum: undefined,
        packageTotalNum: undefined,
        packageTotalPrice: undefined,
        companyId: undefined
      },
      // 手机验证
      phoneNames: undefined,
      // 确认状态
      valueStats: null
    }
  },
  created() {
    this.id = this.$route.query.id
  },
  mounted() {
    this.getDate(1)
    this.getValue()
    this.getTotalInfo()
  },
  methods: {
    /** 获取企业订单总体订单统计 **/
    getTotalInfo() {
      const data = {
        companyId: this.id
      }
      manageCompanyOrderTotalInfo(data).then(res => {
        this.queryName = res.data
      })
    },
    /** 通过ID获取企业信息 **/
    getValue() {
      getDateById(this.id).then(res => {
        this.queryNames = res.data
        this.phoneNames = res.data.contactPhone
      })
    },
    /** 本周,本月 **/
    getDate(row) {
      const end = new Date()
      const start = new Date()
      this.dateRange = []
      if (row !== 1) {
        this.type = 2
        this.head = '近一个月订单数量'
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        this.dateRange = [start, end]
      } else {
        this.type = 1
        this.head = '近一周订餐数量'
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        this.dateRange = [start, end]
      }
      this.getSearch()
    },
    /** 订餐  **/
    getOrdering(x, y) {
      // 基于准备好的dom，初始化echarts实例
      const myChar = this.$echarts.init(document.getElementById('nprdjmakl'))
      // 绘制图表
      myChar.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          width: '89%', // 宽度
          height: '76%', // 高度
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: x
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订餐数量',
            data: y,
            type: 'line',
            symbol: 'none', // 去掉折线图中的节点
            smooth: false, // true 为平滑曲线，false为直线
            areaStyle: {
              normal: { color: 'transparent' }// 改变区域颜色
            }
          }
        ]
      })
      setTimeout(() => {
        window.addEventListener('resize', function() {
          myChar.resize()
        })
      }, 200)
    },
    // 表单重置
    reset() {
      this.statsUpdate = true
      this.statsValue = false
      this.loading = false
      this.form = {
        companyName: undefined,
        contactName: undefined,
        contactPhone: undefined,
        mealPeopleNum: undefined,
        address: undefined,
        sendAddress: undefined
      }
      this.resetForm('form')
    },
    /** 查看信息 **/
    handleAdd() {
      this.reset()
      this.open = true
      this.transfer = true
      this.edit = true
      this.title = '编辑企业信息'
      getCode(this.queryNames.inviteCode).then(res => {
        if (!res.code) {
          this.form = res.data
          const { areaCode } = this.form
          this.selectedOptions = areaCode.split(',')
        }
      })
    },
    /** 取消 **/
    cancel() {
      this.open = false
      this.reset()
    },
    /** 返回 **/
    cancelReturn() {
      this.statsUpdate = true
      this.statsValue = false
      this.transfer = true
      this.edit = true
    },
    /** 编辑 **/
    submitForm: function() {
      const selectedOptions = this.selectedOptions
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (JSON.stringify(selectedOptions) === '[]') {
            return this.msgInfo('企业所在区域不能为空')
          }
          const text = this.transfer ? '修改' : '过户'
          addCompany(this.form).then(res => {
            if (!res.code) {
              this.msgSuccess(text + '成功')
              this.open = false
              this.loading = false
            }
          })
        }
      })
    },
    /** 判断手机是否一致 **/
    getContactPhone(value) {
      if (name !== value) {
        const r = confirm('您是否要将企业过户给' + value + '手机用户？')
        if (r === true) {
          this.valueStats = r
        } else {
          this.valueStats = r
        }
      }
    },
    /** 过户 **/
    getTransfer() {
      this.transfer = false
      this.edit = true
      this.statsValue = true
      this.statsUpdate = false
    },
    /** 编辑 **/
    getEdit() {
      this.edit = false
      this.transfer = true
      this.statsValue = true
      this.statsUpdate = false
    },
    /** 获取省市区 **/
    handleChange(row) {
      this.form.areaCode = row.join(',')
    },
    /** 企业订单导出 **/
    handleExport2() {
      const dateRange1 = this.dateRange1
      if (dateRange1.length > 0) {
        const data = {
          startDate: this.parseTime(dateRange1[0], '{y}-{m}-{d}'),
          endDate: this.parseTime(dateRange1[1], '{y}-{m}-{d}')
        }
        window.location.href = serverMap.base + '/api/order/exportCompanyOrderList?startDate=' + data.startDate + '&endDate=' + data.endDate + '&companyId=' + this.id
      } else {
        return this.msgInfo('请选择时间')
      }
    },
    /** 日期搜索 **/
    getSearch() {
      this.queryName.companyId = this.id
      manageCompanyOrderTotalTrend(this.addDateOrders(this.queryName, this.dateRange)).then(res => {
        const { data } = res
        const x = data.map((item) => item.recordDate)
        const y = data.map((item) => item.packageTotalNum)
        this.getOrdering(x, y)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0;
}

.clearfix {
  color: white;
  font-size: 14px;
}

.box-card {
  width: 100%;

  .text {
    font-size: 14px;

    .order {
      width: 100%;
      height: 40px;
      text-align: left;
      line-height: 40px;
      font-size: 22px;
      font-weight: 600;
    }

    .contrast {
      width: 100%;
      height: 120px;
      line-height: 190px;
      display: flex;
      font-size: 14px;

      .left {
        width: 50%;
        height: 50px;
        text-align: center;
      }

      .right {
        width: 50%;
        height: 50px;
        text-align: center;
      }

      img {
        width: 16px;
      }
    }
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
}

.syl-order {
  height: 250px;
  margin: auto;
  background-image: url("./../../../../assets/image/sales.png");
  background-repeat: no-repeat;
  background-size: cover;

  .contrast {
    height: 162px;

    .syl-contrast-on {
      height: 90px;
      line-height: 77px;
      text-align: center;

      img {
        width: 55px;
        height: 68px;
        vertical-align: middle;
      }
    }

    .syl-contrast-under {
      height: 38px;
      text-align: center;
      font-size: 24px;
      line-height: 38px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}

.syl-meal {
  height: 250px;
  margin: auto;
  background-image: url("./../../../../assets/image/views.png");
  background-repeat: no-repeat;
  background-size: cover;

  .contrast {
    height: 162px;

    .syl-contrast-on {
      height: 90px;
      line-height: 77px;
      text-align: center;

      img {
        width: 68px;
        height: 68px;
        vertical-align: middle;
      }
    }

    .syl-contrast-under {
      height: 38px;
      text-align: center;
      font-size: 24px;
      line-height: 38px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}

.syl-darter {
  height: 250px;
  margin: auto;
  background-image: url("./../../../../assets/image/darter.png");
  background-repeat: no-repeat;
  background-size: cover;

  .contrast {
    height: 162px;

    .syl-contrast-on {
      width: 100%;
      height: 90px;
      line-height: 77px;
      text-align: center;

      img {
        width: 60px;
        height: 70px;
        vertical-align: middle;
      }
    }

    .syl-contrast-under {
      height: 38px;
      text-align: center;
      font-size: 24px;
      line-height: 38px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}

.month {
  margin-top: 20px;
  width: 100%;

  .active {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
}

.ordering {
  width: 100%;
  height: 320px;
}

.export {
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #333333;
  font-size: 14px;

  h3 {
    font-size: 18px;
    margin: 0;
    padding: 0;
  }
}

.syl-undo {
  background: #FFFFFF;
  padding: 20px;
  margin: 20px 0;
}

/deep/ .el-divider--vertical {
  height: 2em;
  margin: 0 15px;
}

/deep/ .el-card__header {
  border: 0;
}

/deep/ .el-card {
  border-radius: 19px;
}

/deep/ .el-icon-date:before {
  color: #89C6FF;
}
</style>
